<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
    <script src="./js/vue.js"></script>
    <style>
        #app {
            width: 800px;
            margin: 10px auto;
        }

        #addD {
            width: 100%;
            text-align: center;
        }

        #addD input:nth-child(1), #addD input:nth-child(2) {
            width: 300px;
            height: 20px;
            border-radius: 4px;
            border: 1px solid #ccc;
            padding-left: 10px;
        }

        #addD input:last-child {
            background-color: dodgerblue;
            border: 0;
            border-radius: 4px;
            height: 23px;
            line-height: 23px;
            color: whitesmoke;
            width: 90px;
        }

        #ListD {
            width: 700px;
            margin: 20px auto;
        }

        #ListD table {
            width: 100%;
            padding-bottom: 5px;
        }

        #allPrice {
            width: 700px;
            margin: auto;
            border-bottom: 1px solid slategrey;
            color: slategrey;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 添加 -->
    <div id="addD">
        <input type="text" placeholder="消费名称" v-model:value="name">
        <input type="text" placeholder="消费价格" v-model:value="price">
        <input type="button" value="添加账单" @click="add()">
    </div>
    <!-- 列表 -->
    <div id="ListD">
        <table>
            <tr >
                <td><strong>编号</strong></td>
                <td><strong>消费名称</strong></td>
                <td><strong>消费价格</strong></td>
                <td><strong>操作</strong></td>
            </tr>
            <tr v-for="(a,index) in arr" :key="index">
                <td>{{index+1}}</td>
                <td>{{a.name}}</td>
                <td>{{a.price}}</td>
                <td><a href="#" @click.prevent="del(index)">删除</a></td>
            </tr>
        </table>
    </div>
    <div id="allPrice">
        <p><strong>消费总计: {{allprice}}</strong></p>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            price: '',
            arr: []
        },
        methods:{
            add(){
                this.arr.push({
                    name: this.name,
                    price: this.price
                })
                this.name = ''
                this.price = ''
            },
            del(index){
                this.arr.splice(index,1)
            }
        },
        computed:{
            allprice(){
                let sum = 0
                for(let i=0;i<this.arr.length;i++){
                    sum += Number(this.arr[i].price)
                }
                return sum
            }
        }
    })
</script>